import React from 'react';

import MySwitch from './../MySwitch';

class SwitchDemo extends React.Component {
  state = {
    toggle: false,
    disabled: false,
    loading: false,

    isCheckedText: false,
    isUnCheckedText: false,


    toggle2: false,
  }

  componentDidMount() {
    console.log('myswitch-ref', this.refs);
  }

  onChange = (val) => {
    console.log(11, val)
    this.setState({
      toggle: val,
    })
  }

  onChange2 = (val) => {
    this.setState({
      toggle2: val,
    })
  }

  render() {
    const { toggle, disabled, toggle2, isCheckedText, isUnCheckedText, loading } = this.state;

    const props = { disabled, loading };

    if ( isCheckedText ) {
      props.checkedText = <span style={{color: 'blue'}}>开启</span>;
    }
    if ( isUnCheckedText ) {
      props.unCheckedText = '关了';
    }

    return (
      <div style={{textAlign: 'left'}}>
        <h2>MySwitch</h2>
        <p>状态: {toggle ? '开启' : '关闭'}</p>
        <p>
          <MySwitch
            ref="myswitch"
            onChange={this.onChange}
            // checkedText={<span style={{color: 'blue'}}>开启</span>}
            // unCheckedText="关了"
            // defaultChecked
            // disabled={disabled}
            // loading
            // themeColor="blue"
            {...props}
          />
        </p>
        <p>
          <button onClick={() => this.setState({disabled: !disabled})}>切换禁用</button>
          <span style={{marginLeft: 10}}>{disabled ? '已禁用' : '未禁用'}</span>
        </p>
        <p>
          <button onClick={() => this.setState({isCheckedText: !isCheckedText})}>显示文字</button>
          <span style={{marginLeft: 10}}>{isCheckedText ? '显示开启文字' : '隐藏开启文字'}</span>
        </p>
        <p>
          <button onClick={() => this.setState({isUnCheckedText: !isUnCheckedText})}>显示文字</button>
          <span style={{marginLeft: 10}}>{isUnCheckedText ? '显示关闭文字' : '隐藏关闭文字'}</span>
        </p>
        <p>
          <button onClick={() => this.setState({loading: !loading})}>Loading</button>
          <span style={{marginLeft: 10}}>{loading ? '显示Loading' : '关闭Loading'}</span>
        </p>

        <p>-</p>
        <p>
          <span>1. 设置属性为 small；</span>
          <span>2. 默认为打开</span>
        </p>
        <MySwitch
          onChange={this.onChange2}
          style={{marginLeft: 20}}
          defaultChecked={true}
          small
        />
        <p>-</p>

        <p>
          <span>1. 使用 style 自定义宽高；</span>
          <span>2. 使用了 checked 属性，可以通过父组件改变其状态</span>
        </p>
        <MySwitch
          onChange={this.onChange2}
          style={{marginLeft: 20, width: 80, height: 30, padding: '10px'}}
          checked={toggle2}
        />
        <p>-</p>

        <img style={{width:700}} src="/images/doc.png" alt="" />

        <MySwitch.OtherDemo ref="otherDemo" />
      </div>
    )
  }
}

export default SwitchDemo;